<template>
  <q-page>
    <q-list separator no-border>
        <q-list-header>
            功能设置 <label class="float-right text-primary" v-if="name">《{{ name }}》</label>
        </q-list-header>
        <q-item-separator />
        <q-item>
            <q-item-side icon="star" color="red" />
            <q-item-main>
                <q-item-tile label>特别关注</q-item-tile>
                <q-item-tile sublabel>特别关注的影片将出现在影片列表页的[置顶]位置中。</q-item-tile>
            </q-item-main>
            <q-item-side right>
                <q-toggle v-model="checkedTop" color="red" @input="onToggleTop" />
            </q-item-side>
        </q-item>
        <q-item>
            <q-item-side icon="email" color="primary" />
            <q-item-main>
                <q-item-tile label>开分提醒</q-item-tile>
                <q-item-tile sublabel>影片开分或评分发生变化时会进行邮件提醒。</q-item-tile>
            </q-item-main>
            <q-item-side right>
                <q-toggle v-model="checkedMonitor"  @input="onToggleMonitor" />
            </q-item-side>
        </q-item>
        <q-item>
            <q-item-side icon="bar_chart" color="primary" />
            <q-item-main>
                <q-item-tile label>评分跟踪</q-item-tile>
                <q-item-tile sublabel>跟踪影片的评分、想看人数、看过人数等数据的每日变化情况。</q-item-tile>
            </q-item-main>
            <q-item-side right>
                <q-toggle v-model="checkedScore"  @input="onToggleScore"/>
            </q-item-side>
        </q-item>
        <q-item>
            <q-item-side icon="bar_chart" color="primary" />
            <q-item-main>
                <q-item-tile label>影评采集</q-item-tile>
                <q-item-tile sublabel>定期采集影评的最新影评数据。</q-item-tile>
            </q-item-main>
            <q-item-side right>
                <q-toggle v-model="checkedReview"  @input="onToggleReview"/>
            </q-item-side>
        </q-item>

        <q-list-header>默认功能 <small>(影评上映期间自动进行)</small></q-list-header>
        <q-item-separator />
        <q-item>
            <q-item-side icon="done" color="secondary" />
            <q-item-main>
                <q-item-tile label>评分预测</q-item-tile>
                <q-item-tile sublabel>影片开分前对影片的得分进行预估。</q-item-tile>
            </q-item-main>
            <q-item-side right>
                <q-toggle v-model="dftToggle" disable color="secondary" />
            </q-item-side>
        </q-item>
        <q-item>
            <q-item-side icon="done" color="secondary" />
            <q-item-main>
                <q-item-tile label>用户评论</q-item-tile>
                <q-item-tile sublabel>定期获取影片的用户评论数据。</q-item-tile>
            </q-item-main>
            <q-item-side right>
                <q-toggle v-model="dftToggle" disable color="secondary" />
            </q-item-side>
        </q-item>
        <q-item>
            <q-item-side icon="done" color="secondary" />
            <q-item-main>
                <q-item-tile label>长评短评</q-item-tile>
                <q-item-tile sublabel>定期获取影片的用户短评及影评数据。</q-item-tile>
            </q-item-main>
            <q-item-side right>
                <q-toggle v-model="dftToggle" disable color="secondary" />
            </q-item-side>
        </q-item>
        <q-item>
            <q-item-side icon="done" color="secondary" />
            <q-item-main>
                <q-item-tile label>口碑分析</q-item-tile>
                <q-item-tile sublabel>根据用户长短评进行关键词提取。</q-item-tile>
            </q-item-main>
            <q-item-side right>
                <q-toggle v-model="dftToggle" disable color="secondary" />
            </q-item-side>
        </q-item>
    </q-list>
  </q-page>
</template>

<script>
import Douban from '../api/movie.js';

export default {
  name: 'DoubanMovieSearch',
  data() {
    return {
      title: '豆瓣影片设置',
      // back: '/douban',
      id: 0,
      name: '',
      dftToggle: true,
      checked: true,
      checkedTop: false,
      checkedMonitor: false,
      checkedScore: false,
      checkedReview: false
    }
  },
  mounted() {
    let me = this;
    this.$api.ui.pageBackBtn = function(){
      me.$router.push('/douban/movie/' + me.$route.params.id);
    }
    Douban.loadMovieMarks(this.$route.params.id, res => {
        let data = res.data.data;
        me.id = data.id;
        me.name = data.name;
        me.checkedTop = (data.marks.indexOf('TOP') >= 0);
        me.checkedMonitor = (data.marks.indexOf('MONITOR') >= 0);
        me.checkedScore = (data.marks.indexOf('SCORE') >= 0);
        me.checkedReview = (data.marks.indexOf('REVIEW') >= 0);
    });
  },
  methods: {
    onChange(val, type) {
        Douban.doMovieMark(this.id, type, val);
    },
    onToggleTop(val) {
        return this.onChange(val, 'TOP');
    },
    onToggleMonitor(val) {
        return this.onChange(val, 'MONITOR');
    },
    onToggleScore(val) {
        return this.onChange(val, 'SCORE');
    },
    onToggleReview(val) {
        return this.onChange(val, 'REVIEW');
    }
  }
}
</script>

<style>
</style>
